<template>
  <el-dialog
    :title="title"
    center
    :visible.sync="openState"
    :close-on-click-modal="false"
    :before-close="close"
    width="900px"
    v-if="openState"
    append-to-body
  >
    <div class="discountReceipt-pick-operate-box">
      <div class="operate-box-top">
        <Ht-search-form
          :dictMap="dictMap"
          :queryParams="queryParams"
          :outputQueryParams="queryParams"
          :formOptions="formOptions"
          :advOptions="[]"
          :labelWidth="90"
          :defaultEventKey="defaultEventKey"
        ></Ht-search-form>
      </div>
      <div class="operate-box-bottom">
        <div class="bottom-content">
          <ht-table
            ref="dataTable"
            rowKey="bankCode"
            :showSerialNumber="false"
            :multi-select="false"
            :dictMap="dictMap"
            :reqConfig="reqConfig"
            :queryParams="queryParams"
            :tableBindColumns="tableBindColumns"
            :showRightToolbar="false"
            :defaultEventKey="defaultEventKey"

          >
            <template v-slot:operate>
              <el-table-column
                label="操作"
                align="center"
                fixed="left"
                width="160"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <ht-button-group
                    :buttonList="[
                      {
                        label: '选择',
                        doFunc: () => {
                          confirm(scope.row);
                        },
                      },
                    ]"
                  />
                </template>
              </el-table-column>
            </template>
          </ht-table>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { apiUrlConfigBankCodeSearch } from "@/api/cnaps/bizMng/brnoBind.js";
export default {
  name: 'BankCodeSearchDialog',
  props: {},
  data() {
    return {
      title: '',
      openState: false,
      defaultEventKey:"bankCodeSearch",
      // 来源标识 为了服用区分是哪个选项触发的
      fromFlag: '',
      dictMap: {},
      tableLoadingState: false,
      formOptions: [],
      queryParams: {
        bankCode: '',
        orgFullname: '',
      },
      reqConfig: apiUrlConfigBankCodeSearch,
      tableBindColumns: [
        { label: `参与行行号`, prop: 'bankCode' },
        { label: `参与行行名`, prop: 'orgFullname' },
        { label: `清算行行号`, prop: 'drctBankCode' },
      ],
    };
  },
  mounted() {
    const formOptions = [
      {
        type: 'input',
        prop: 'bankCode',
        defaultAttr: {
          size: 'small',
          label: '参与行行号',
          placeholder: '请输入参与行行号',
        },
      },
      {
        type: 'input',
        prop: 'orgFullname',
        defaultAttr: {
          size: 'small',
          label: '参与行行名',
          placeholder: '请输入参与行行名',
        },
      },
    ];
    this.formOptions = formOptions;
  },
  methods: {
    show() {
      this.$set(this.queryParams,"bankCode","");
      this.$set(this.queryParams,"orgFullname","");
      this.openState = true;
    },
    close() {
      this.openState = false;
    },
    loadData() {},
    // 点击确认数据
    confirm(row) {
      this.$emit('confirm', this.fromFlag, row);
      this.openState = false;
    },
  },
};
</script>

<style scoped></style>
